<template>
  <div class="ass-item-container">
    <img src="../assets/img/default-graph/tx.jpg" alt="" circle>
    <div class="info">
      <h3 fz14 ellipsis1>音乐之声音乐</h3>
      <span fz12>147人参与</span>
    </div>
    <div v-if="btnType===0" class="btn joined">已加入</div>
    <div v-if="btnType===1" class="btn apply">申请</div>
    <div v-if="btnType===2" class="btn join">加入</div>
  </div>
</template>

<script>
export default {
  props: {
    btnType: { // 0: 已加入， 1: 申请，2: 加入
      type: Number,
      default: 2
    }
  }
}
</script>

<style lang="scss" scoped>
.ass-item-container {
  padding: 16px;
  display: flex;
  align-items: center;
  position: relative;
  &:not(:last-child) {
    &::after {
      content: ' ';
      position: absolute;
      pointer-events: none;
      bottom: 0;
      left: -50%;
      right: -50%;
      height: 1Px;
      border: 0 solid #ebedf0;
      transform: scale(0.5);
      background: #ebedf0;
    }
  }
  img {
    height: 50px;
    height: 50px;
  }
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 10px;
    justify-content: center;
    h3 {
      width: 220px;
      display: block;
      color: #333;
      line-height: 20px;
      height: 20px;
      font-weight: 800;
    }
    span {
      color: #999999;
      line-height: 20px;
    }
  }
  .btn {
    width: 58px;
    height: 30px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 30px;
    &.joined {
      background: #f9f9f9;
      border: 1px #ccc solid;
      color: #cccccc;
    }
    &.apply {
      background: #fff;
      border: 1px #f2a062 solid;
      color: #f2a062;
    }
    &.join {
      background: #f9f9f9;
      border: 1px #74aaf8 solid;
      color: #74aaf8;
    }
  }
}
</style>
